<template>
  <div class="ui-area">
    <div class="area-title">请选择收货地址</div>
    <div class="area-tabs ui-1px-b">
      <uiTabs
        :navPerView="4"
        v-model="activeIndex"
        :height="80"
        :lineHeight="6"
        lineWidth="64rpx"
        @change="handleChangeTabs"
      >
        <uiTabsItem :title="item.name" v-for="item in displayColumns"></uiTabsItem>
      </uiTabs>
    </div>
    <!-- 地址列表 -->
    <div class="area-list-box">
      <scroll-view scroll-y="true" class="area-list-box--scroll">
        <div class="area-list">
          <div
            class="area-list-item ui-1px-b"
            v-for="(item , $index ) in list"
            :class="{ 'is-selected': $index === activeItemIndex  }"
          >
            <view class="area-list-item--txt">{{ item.name }}</view>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { province_list, city_list, county_list } from "@/data/china-address.js";
import uiTabs from "@/components/base/tabs/index.vue";
import uiTabsItem from "@/components/base/tabs-item/index.vue";
function isOverseaCode(code) {
  return code && code[0] === "9";
}
export default {
  name: "uiArea",
  components: {
    uiTabs,
    uiTabsItem
  },
  props: {
    value: String,
    columnsNum: {
      type: [Number, String],
      default: 3
    },
    areaList: {
      type: Object,
      default() {
        return {
          province_list: province_list,
          city_list: city_list,
          county_list: county_list
        };
      }
    },
    isOverseaCode: {
      type: Function,
      default: isOverseaCode
    },

    columnsPlaceholder: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      code: this.value,
      columns: [{ values: [] }, { values: [] }, { values: [] }],

      list: province_list,
      // 当前选择的tab下表
      activeIndex: 0,

      showTabsItem: []
    };
  },
  computed: {
    province() {
      return this.areaList.province_list || {};
    },

    city() {
      return this.areaList.city_list || {};
    },

    county() {
      return this.areaList.county_list || {};
    },
    displayColumns() {
      return this.columns.slice(0, +this.columnsNum);
    },
    placeholderMap() {
      return {
        province: this.columnsPlaceholder[0] || "",
        city: this.columnsPlaceholder[1] || "",
        county: this.columnsPlaceholder[2] || ""
      };
    },

    activeItemIndex() {
      let obj = {
        0: "province",
        1: "city",
        2: "county"
      };
      debugger;
      return this.getIndex(obj[this.activeIndex], this.code).index;
    }
  },
  created() {
    this.setValues();
  },
  mounted() {},
  methods: {
    handleChangeTabs(index) {
      // 获取当前点击的是哪一个
      // 获取当前所对应的数据
      this.activeIndex = index;
      // 第二个 获取当前列表中选中的数据
      this.setValues();
    },

    _getCurrentSelectData(index) {},

    setValues() {
      // 是否初始化设置了 默认城市
      let { code } = this;

      // if (!code) {
      //   if (this.columnsPlaceholder.length) {
      //     code = PLACEHOLDER_CODE;
      //   } else if (Object.keys(this.county)[0]) {
      //     code = Object.keys(this.county)[0];
      //   } else {
      //     code = "";
      //   }
      // }
      // 获取省数据
      const province = this.getList("province");
      // 获取当前选择的市数据
      const city = this.getList("city", code.slice(0, 2));
      // 获取当前选择的市数据
      const county = this.getList("county", code.slice(0, 4));

      switch (this.activeIndex) {
        case 0:
          this.list = province;
          break;
        case 1:
          this.list = city;
          break;
        case 2:
          this.list = county;
          break;
        default:
          break;
      }

      this.columns = [
        this.getIndex("province", code),
        this.getIndex("city", code),
        this.getIndex("county", code)
      ];

      // picker.setColumnValues(0, province);
      // picker.setColumnValues(1, city);

      // if (
      //   city.length &&
      //   code.slice(2, 4) === "00" &&
      //   !this.isOverseaCode(code)
      // ) {
      //   [{ code }] = city;
      // }

      // picker.setColumnValues(2, this.getList("county", code.slice(0, 4)));
      // picker.setIndexes([
      //   this.getIndex("province", code),
      //   this.getIndex("city", code),
      //   this.getIndex("county", code)
      // ]);
    },
    // get index by code
    getIndex(type, code) {
      let compareNum = type === "province" ? 2 : type === "city" ? 4 : 6;
      const list = this.getList(type, code.slice(0, compareNum - 2));

      // oversea code
      if (this.isOverseaCode(code) && type === "province") {
        compareNum = 1;
      }

      code = code.slice(0, compareNum);

      for (let i = 0; i < list.length; i++) {
        if (list[i].code.slice(0, compareNum) === code) {
          return {
            index: i,
            ...list[i]
          };
        }
      }

      return {
        index: 0
      };
    },
    // get list by code
    getList(type, code) {
      let result = [];
      if (type !== "province" && !code) {
        return result;
      }

      const list = this[type];
      // 遍历对象转换成数组类型
      result = Object.keys(list).map(listCode => ({
        code: listCode,
        name: list[listCode]
      }));

      if (code) {
        // oversea code
        if (this.isOverseaCode(code) && type === "city") {
          code = "9";
        }

        result = result.filter(item => item.code.indexOf(code) === 0);
      }

      if (this.placeholderMap[type] && result.length) {
        // set columns placeholder
        let codeFill = "";
        if (type === "city") {
          codeFill = PLACEHOLDER_CODE.slice(2, 4);
        } else if (type === "county") {
          codeFill = PLACEHOLDER_CODE.slice(4, 6);
        }

        result.unshift({
          code: `${code}${codeFill}`,
          name: this.placeholderMap[type]
        });
      }

      return result;
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss">
</style>
